<template>
  <view class="document-form-page">
    <view class="form-container">
      <view class="form-title">文档信息填写</view>
      
      <view class="form-group">
        <view class="form-label">文档名称 <span class="required">*</span></view>
        <view class="form-control">
          <input 
            type="text" 
            v-model="documentInfo.name" 
            placeholder="请输入文档名称"
          />
        </view>
      </view>
      
      <view class="form-group">
        <view class="form-label">文档类型 <span class="required">*</span></view>
        <view class="form-control">
          <select v-model="documentInfo.type">
            <option value=10>智能表格</option>
			<option value=3>文档</option>
			<option value=4>表格</option>
          </select>
        </view>
      </view>
      
      <view class="form-group">
        <view class="form-label">管理员 <span class="required">*</span>
          <span class="hint">(1-3人)</span>
        </view>
        
        <view class="admin-inputs">
          <view class="admin-input-item" v-for="(admin, index) in documentInfo.admins" :key="index">
            <input 
              type="text" 
              v-model="documentInfo.admins[index]" 
              placeholder="请输入管理员id"
            />
            <button 
              class="remove-btn" 
              @click="removeAdmin(index)" 
              :disabled="documentInfo.admins.length <= 1"
            >
              <icon type="clear" size="16"></icon>
            </button>
          </view>
          
          <button 
            class="add-btn" 
            @click="addAdmin" 
            :disabled="documentInfo.admins.length >= 3"
          >
            <icon type="plus" size="16"></icon> 添加管理员
          </button>
        </view>
      </view>
      
      <view class="form-actions">
        <button class="submit-btn" @click="submitForm">添加文档</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      documentInfo: {
        name: '',        // 文档名称 - string
        type: 10,        // 文档类型 - string
        admins: ['']     // 管理员数组 - 1-3个元素的数组
      }
    };
  },
  methods: {
    // 添加管理员输入框
    addAdmin() {
      if (this.documentInfo.admins.length < 3) {
        this.documentInfo.admins.push('');
      }
    },
    
    // 移除管理员输入框
    removeAdmin(index) {
      if (this.documentInfo.admins.length > 1) {
        this.documentInfo.admins.splice(index, 1);
      }
    },
    
    // 提交表单
    submitForm() {
      // 表单验证
      if (!this.documentInfo.name.trim()) {
        uni.showToast({
          title: '请输入文档名称',
          icon: 'none'
        });
        return;
      }
      
      if (!this.documentInfo.type) {
        uni.showToast({
          title: '请选择文档类型',
          icon: 'none'
        });
        return;
      }
      
      // 验证管理员信息
      const validAdmins = this.documentInfo.admins.some(admin => admin.trim() !== '');
      if (!validAdmins) {
        uni.showToast({
          title: '请至少填写一位管理员',
          icon: 'none'
        });
        return;
      }
      
      // 处理空的管理员输入
      const filteredAdmins = this.documentInfo.admins
        .map(admin => admin.trim())
        .filter(admin => admin !== '');
      
	  uni.showLoading({
	  	title: '正在创建...',
	  	mask: false
	  });
	  
      // 构建最终数据对象
      const formData = {
        doc_name: this.documentInfo.name.trim(),
        doc_type: Number(this.documentInfo.type),
        admin_users: filteredAdmins
      };
	  
	  uni.request({
	  	url: 'http://ziyan.xshhotels.cn:8981/api/QYWXDocument/AddDocument',
	  	method: 'POST',
	  	data: formData,
		success: (res) => {
			if(res.data.success){
				uni.hideLoading();
				uni.showToast({
				  title: '添加成功',
				  icon: 'success'
				});
				uni.navigateBack();
			}
		},
		fail: () => {
			uni.hideLoading();
			//console.error('刷新排队状态请求失败');
			uni.showToast({
				title: '网络错误4，请重试',
				icon: 'none',
				duration: 2000
			});
		}
	  })
      
      // 显示提交的数据（实际项目中这里会发送到后端）
      console.log('提交的文档信息:', formData);
      
      // 可以在这里重置表单
      // this.resetForm();
    },
    
    // 重置表单
    resetForm() {
      this.documentInfo = {
        name: '',
        type: '',
        admins: ['']
      };
    }
  }
};
</script>

<style scoped>
.document-form-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 30px 0;
}

.form-container {
  width: 600px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 25px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.required {
  color: #ff4d4f;
}

.hint {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}

.form-control {
  width: 100%;
}

input, select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

input:focus, select:focus {
  outline: none;
  border-color: #007aff;
}

.admin-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-input-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-input-item input {
  flex: 1;
}

.remove-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #666;
}

.remove-btn:disabled {
  background-color: #f5f5f5;
  color: #ccc;
  cursor: not-allowed;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background-color: #f0f7ff;
  color: #007aff;
  border: 1px solid #cce0ff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  width: auto;
}

.add-btn:disabled {
  background-color: #f5f5f5;
  color: #ccc;
  border-color: #d9d9d9;
  cursor: not-allowed;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.submit-btn {
  width: 180px;
  height: 44px;
  background-color: #007aff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-btn:hover {
  background-color: #0066cc;
}

/* 适配不同屏幕尺寸 */
@media (max-width: 768px) {
  .form-container {
    width: 90%;
    padding: 20px;
  }
}
</style>
